<template>
<view class="dingdanxiangqing">
	<ad unit-id="adunit-26073b177a279bd1" ad-type="video" ad-theme="white"></ad>
	<view style="width: 670upx; height: auto; margin: 30upx auto 30upx; background: #FFF; border-radius: 10upx; overflow: hidden; 
		box-shadow: 0upx 3upx 10upx 0upx rgba(241, 243, 245, 0.54);">
		<view class="item" style="margin-top: 31upx;">			
			<view class="left">租借地点</view>
			<view class="right" style="font-size: 36upx; color: #ef7738;">{{info.shopName}}</view>
		</view>
		<view class="item">			
			<view class="left">租借时间</view>
			<view class="right">{{info.rentTime}}</view>
		</view>
		<view class="item">			
			<view class="left">归还时间</view>
			<view class="right">{{info.returnTime||order[info.orderStatus]}}</view>
		</view>
		<view class="item">			
			<view class="left">应付金额</view>
			<view class="right">{{info.shouldExpense||info.shouldExpense==0?(info.shouldExpense+'￥'):order[info.orderStatus]}}</view>
		</view>
		<view class="item">			
			<view class="left">实付金额</view>
			<view class="right">{{info.realExpense||info.realExpense==0?(info.realExpense+'￥'):order[info.orderStatus]}}</view>
		</view>
		<view class="item">			
			<view class="left">订单编号</view>
			<view class="right">{{info.orderId}}</view>
		</view>
		<view class="item">			
			<view class="left">充电宝编号</view>
			<view class="right">{{info.chargerSn}}</view>
		</view>
		<view style="background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(#000000, #000000); width: 600upx; height: 80upx; 
			line-height: 80upx; text-align: center;	box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 50upx; margin: 20upx auto 50upx; font-size: 36upx; 
			color: #fff;" v-if="info.orderStatus == 1 && info.chargeStatus == 1 && info.creditOrder == 0" @click="zhifu">支付订单</view>		
			
		<!--  v-if="info.orderStatus == 0 && info.chargeStatus == 0" -->
		<view v-if="info.orderStatus == 0 && info.chargeStatus == 0" class="item" style="height: 60upx; line-height: 60upx; border-bottom: none;">			
			<view class="left"></view>
			<view class="right" style="font-size: 24upx; color: #ef6e2a; height: 60upx; line-height: 60upx;">
				<text @click="goumai.show">我要购买充电宝</text>
			</view>
		</view>				
		<!-- <view v-if="!((info.orderStatus == 1 && info.chargeStatus == 1) || (info.orderStatus == 0 && info.chargeStatus == 0))" style="height: 100upx;"></view> -->
		<view v-if="!(info.orderStatus == 1 && info.chargeStatus == 1)" style="height: 100upx;"></view>
	</view>		
	
	<view v-if="goumai.blank" style="height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 100; background: rgba(0, 0, 0, 0.2);">
		<view style="height: 820upx; width: 100%; background: #fff; position: absolute; left: 0; bottom: 0; z-index: 101;
			border-radius: 30upx 30upx 0upx 0upx; box-shadow: 0upx -3upx 10upx 0upx rgba(241, 243, 245, 0.54);">	
			<view style="width: 100%; line-height: 100upx; font-size: 40upx; position: relative; text-align: center;">
				购买充电宝
				<image @click="goumai.blank = false" style="width: 50upx; height: 50upx; position: absolute; right: 50upx; top: 25upx;" src="/static/close.png"></image>
			</view>
			<view style="padding: 0 50upx; width: 100%; box-sizing: border-box;">
				<view style="height: 200upx; width: 100%; position: relative;">
					<image src="/static/baoimage.png" style="width: 200upx; height: 200upx; position: absolute; top: 0; left: -20upx;"></image>
					<view style="font-size: 36upx; color: #666; position: absolute; left: 200upx; top: 40upx;">电小童充电宝</view>
					<view style="font-size: 36upx; color: #666; position: absolute; left: 200upx; top: 120upx;">¥99.00</view>
				</view>
				<view style="font-size: 35upx;">注意事项</view>
				<view style="font-size: 30upx; color: #999; margin-top: 20upx;">您将永久留下电小童充电宝，无需归还</view>
				<view style="font-size: 30upx; color: #999; margin-top: 20upx;">确认留下将<text style="color: #EE702E;">扣取您的99元押金</text>（无押金将代扣99元</view>				
				<view style="font-size: 30upx; color: #999; margin-top: 10upx;">费用），扣取成功后不予退还</view>				
				
				<view style="font-size: 30upx; color: #666; margin-top: 40upx;">
					<checkbox-group @change="changeCheck" style="display: inline-block;">
						<checkbox v-model="goumai.sele" style="transform: scale(0.6); position: relative; top: -5upx;"/>我已阅读并同意上述规则
					</checkbox-group>
				</view>
			</view>
			
			<button @click="goumai.submit" style="width: 690upx; height: 90upx; line-height: 90upx; background: #EF7738;
				box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 45upx; color: #fff; font-size: 30upx; text-align: center; position: absolute;
				left: 30upx; bottom: 80upx; z-index: 101;">确认购买</button>
		</view>
	</view>
	
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			info: {},
			dingdanId: '',
			order: [ '租借中', '已归还', '已撤销', '超时' ],
			charge: [ '未付款', '待支付', '已付款', '退款' ],
			goumai: {
				blank: false,
				sele: false,
				show: () => {					
					this.goumai.sele = false;
					this.goumai.blank = true;
				},
				submit: () => {
					if ( this.goumai.sele ) {
						http.request({
							url: `borrow/buy?orderId=${this.info.orderId}`,
							method: 'get',
							success: (res)=>{		
								uni.hideLoading();
								uni.showModal({ title: '提示', content: '买宝操作成功', showCancel: false });	
								this.goumai.blank = false;
								http.request({
									url: `orderFormController/${this.dingdanId}?orderId=${this.dingdanId}`,
									method: 'get',
									success: (res)=>{		
										if(res.dataList&&res.dataList.orderId){ this.info = res.dataList;
										}else{ uni.navigateBack({ delta: 1 }); }
									}
								});
							},
							fail: ()=>{	uni.hideLoading(); }
						});		
					} else {
						uni.showModal({ title: '提示', content: '请先阅读购买充电宝注意事项，并勾选我已阅读并同意上述规则', showCancel: false });	
					}					
				}
			}			
		}
	},
	methods: {		
		changeCheck(e) {
			if (e.type == "change" && e.detail.value.length > 0) {
				this.goumai.sele = true;
			} else {
				this.goumai.sele = false;
			}
		},
		zhifu(){		
			let user = uni.getStorageSync('user');
			uni.showLoading({ title: '加载中' });
			http.request({
				url: `borrow/wxPay?openId=${user.wxOpenId}&orderId=${this.info.orderId}`,
				method: 'get',
				success: (res)=>{		
					uni.hideLoading();
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.dataList.timeStamp,
						nonceStr: res.dataList.nonceStr,
						package: res.dataList.package,
						signType: 'MD5',
						paySign: res.dataList.paySign,
						success: (res)=>{							
							uni.showModal({ title: '提示', content: '支付成功', showCancel: false }).then(() => {
								uni.navigateBack({ delta: 1 });		
							});						
						},
						fail: (err)=>{							
							uni.showToast({ icon: 'none', title: '支付失败！', duration: 2000 });		
						}
					});
				},
				fail: ()=>{					
					uni.hideLoading();
				}
			});			
		},
		// goumai() {
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '进行买宝操作后会扣除用户的押金，订单费用将清除，确定要进行买宝操作吗？',
		// 		success: (res) => {
		// 			console.log(res);
		// 			if( res && res.confirm ) {
		// 				uni.showLoading({ title: '加载中' });
		// 				http.request({
		// 					url: `borrow/buy?orderId=${this.info.orderId}`,
		// 					method: 'get',
		// 					success: (res)=>{		
		// 						uni.hideLoading();
		// 						uni.showModal({ title: '提示', content: '买宝操作成功', showCancel: false });							
		// 						http.request({
		// 							url: `orderFormController/${this.dingdanId}?orderId=${this.dingdanId}`,
		// 							method: 'get',
		// 							success: (res)=>{		
		// 								if(res.dataList&&res.dataList.orderId){
		// 									this.info=res.dataList;
		// 								}else{					
		// 									uni.navigateBack({ delta: 1 });
		// 								}
		// 							}
		// 						});
		// 					},
		// 					fail: ()=>{					
		// 						uni.hideLoading();
		// 					}
		// 				});							
		// 			}
		// 		}
		// 	});
			
		// },
		goBack() {
			uni.navigateBack({ delta: 1 });			
		}
	},
	onLoad() {
		let pages = getCurrentPages();
		let page = pages[pages.length-1];
		this.dingdanId = page.options.id;
		http.request({
			url: `orderFormController/${this.dingdanId}?orderId=${this.dingdanId}`,
			method: 'get',
			success: (res)=>{		
				if(res.dataList&&res.dataList.orderId){
					this.info=res.dataList;
				}else{					
					uni.navigateBack({ delta: 1 });
				}
			}
		});
	}
}
</script>

<style>
.dingdanxiangqing {
	height: 100vh;
	position: relative;
	background: #f7f7f7;
	overflow: auto;
}
.dingdanxiangqing .top-box-title {
	height: 64upx;
	line-height: 64upx;
	position: absolute;
	top: 70upx;
	left: 0;
	color: #FFFFFF;
	font-size: 34upx;
	z-index: 10;
}
.dingdanxiangqing .item {
	height: 126upx;;
	line-height: 126upx;
	width: 570upx;
	margin: 0 auto;
	color: #000000;	
	font-size: 30upx;
	border-bottom: 2upx solid #ebebeb;
}
.dingdanxiangqing .left,.right {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
}
.dingdanxiangqing .left {
	width: 40%;
	text-align: left;
}
.dingdanxiangqing .right {
	width: 60%;
	height: 126upx;
	line-height: 126upx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	text-align: right;
}
</style>